<template>
  <div class="home">
    <div>
      <img alt="Vue logo" src="../assets/logo.png" />
      <div>{{ `vuex仓库的数据user分支：${$store.state.user.name}` }}</div>
      <div>
        <div :class="$style.txt">当前标题：{{ msg }}</div>
        <div :class="$style.txt">我是ref的语法糖：{{ msgRef }}</div>
        <div>当前年龄：{{ dataList.age }}</div>
        <el-button type="primary" @click="change">改变文字</el-button>
        <el-button type="warning" @click="addNum">改变年龄</el-button>
      </div>
      <!-- vue2中的sync修饰符。
      <ChildComponent :title.sync="pageTitle" />
      // vue3中的sync修饰符中则是使用：
      <ChildComponent v-model:title="pageTitle" /> -->

      <subComponent
        ref="subComponents"
        v-model:msgList="infoList.dataList"
        v-model:msg="msg"
        @click-fu="clickFu"
      />
      <el-button type="danger" @click="openElement">子组件暴露属性</el-button>
      <div>请求的数据： {{ infoList.dataList }}</div>
    </div>
    <b-page v-model:msg="msg">
      <template v-slot:header>
        <div>我是插槽的内容--------1</div>
      </template></b-page
    >
    <!-- 在vue3中新加了一个组件叫<Suspense></Suspense>,其作用是当你在进行一个异步加载时，可以先提供一些静态组件作为显示内容，然后当异步加载完毕时再显示.
    这是一个内置标签,不用引入直接使用就ok -->
    <!-- <Suspense>
      <div>请求的数据(顶层await)： {{ data1 }}</div>
    </Suspense> -->
  </div>
</template>

<script>
export default {
  name: 'HomeView',
}
</script>

<script setup>
// vue3语法糖 setup直接写在script上, 顶层 await, 如果使用await setup前面会自动加一个async
// vue3 父组件使用子组件，先用import引入，可直接引用
// vue3内部做了静态提升，来改善渲染效率
// defineEmits：子传父方法,  defineProps：父传子属性值,  defineExpose：子组件暴露自己的属性

import subComponent from './components/subComponent.vue'
import BPage from './aboutComponents/BPage.vue'
import { getCourseList } from '../http/api'
import { onMounted, onUnmounted, nextTick, ref, reactive, toRefs } from 'vue'

//-------onMounted所有的生命周期用法均为回调函数---------------
let params1 = reactive({
  jiuDtaa: [],
})
onMounted(async () => {
  console.log('我创建了')
  const data = await getCourseList()
  params1.jiuDtaa = data[1]
  console.log('我是请求的数据3------', params1.jiuDtaa)
})
// -------onUnmounted销毁实例变为onUnmounted，与vue2的destroy作用一致---------------
onUnmounted(() => {
  console.log('我销毁了')
})

// ---------ref的运用方法（ref方法是让我们的简单类型数据变成响应式数据，ref包裹的数据，在改变的时候需要.value来获取）-------
// ref语法糖
let msg = ref('我是首页呀')
// 详解写法
// msg = {
//   value: '我是首页呀',
//   get:()=> {
//     return this.value
//   },
//   set:(v)=> {
//     this.value = v
//   }
// }
let change = () => {
  msg.value = '改变了文字：我是首页哦！'
  nextTick(() => {
    // 访问更新后的 DOM
  })
}

// ----------reactive的运用方法（reactive方法是让我们的复杂类型数据变成响应式）----------------
let dataList = reactive({
  title: '我是标题',
  age: '19',
})

let addNum = () => {
  dataList.age--
}

// ------------子传父的数据-------------------
let clickFu = (r) => {
  console.log('我是子组件传过来的数据------', r)
  msg.value = r
}

// -------------父组件调用子组件的方法(子组件暴露自身的元素)-------------------------
const subComponents = ref()
const openElement = () => {
  console.log('子组件暴露自身的元素---', subComponents.value)
  subComponents.value.sonMethods() // 父组件调用子组件的方法
}

// ------------调用方法请求数据---------------------
let infoList = reactive({
  dataList: [],
})
let getInfo = async () => {
  const data = await getCourseList()
  infoList.dataList = data[0]
  console.log('我是请求的数据------', infoList.dataList)
}
getInfo() // 调用方法

// 配合vue3 async setup语法糖 写法（顶层 await）---需要配置:在Vue3中，如果当前组件的setup使用了async/await，那么其调用组件的父组件的外层需要嵌套一个<suspense></suspense>标签
// const data1 = await getCourseList();
// console.log("我是请求的数据1------", data1);
</script>

<style module>
/* style语法糖--------------------:class="$custom.green"*/
.txt {
  color: blue;
}
</style>
